<template>
  <div class="nav-bottom">
    <div class="nav-bottom-center">
      <span class="bottom-span">IMMERSE</span>
      <div class="bottom-right">
        <ul class="bottom-ul">
          <li
            v-for="(item, index) in topbottomlist"
            :key="item"
            @click="goside(item, index)"
          >
            <span>{{ item.liname }}</span>
          </li>
        </ul>
        <div class="bottom-search">
          <span class="search-span">
            <img src="http://192.168.2.27:8888/assets/img/search.png" alt="" />
          </span>
          <input
            type="text"
            class="search-input"
            placeholder="Search"
            v-model.trim="searchval"
          />
        </div>
      </div>
      <span class="bottom-right-media" @click="changelistactive()"></span>
      <div class="searchmessage-div" :class="{ isinput: issearchinput }">
        <ul class="search-ul" v-if="list.length != 0">
          <li v-for="item in list" :key="item">
            <router-link :to="{ path: '/cardeal', query: { id: item.id } }">{{
              item.body
            }}</router-link>
          </li>
        </ul>
        <h4 v-else class="no-data-span">No Data</h4>
      </div>
    </div>

    <div class="bottom-list" :class="this.islistactive ? 'isanimate' : ''">
      <ul class="list-ul">
        <li
          v-for="(item, index) in topbottomlist"
          :key="item"
          @click="goside(item, index)"
        >
          <!-- {{item.liname}} -->
          <span>{{ item.liname }}</span>
        </li>
      </ul>
      <div class="list-search">
        <span class="search-span">
          <img src="http://192.168.2.27:8888/assets/img/search.png" alt="" />
        </span>
        <input type="text" class="search-input" placeholder="Search" />
      </div>
    </div>
  </div>
</template>

<script>
import { gethomesearch } from "network/request.js";
export default {
  name: "NavBottom",
  data() {
    return {
      islistactive: false,
      clientWidth: 0,
      topbottomlist: [
        {
          liname: "首页",
          livalue: "HOME",
        },
        {
          liname: "产品",
          livalue: "PRODUCT",
        },
        {
          liname: "关于我们",
          livalue: "ABOUT",
        },
        {
          liname: "今日热卖",
          livalue: "DEALS",
        },
        {
          liname: "底部菜单",
          livalue: "CONTACT",
        }
      ],
      issearchinput: false,
      searchval: "",
      goodsList: [],
    };
  },
  computed: {
    list: function () {
      //逻辑-->根据input的value值筛选goodsList中的数据
      var arrByZM = []; //声明一个空数组来存放数据
      for (var i = 0; i < this.goodsList.length; i++) {
        //for循环数据中的每一项（根据name值）
        if (this.goodsList[i].body.search(this.searchval) != -1) {
          //判断输入框中的值是否可以匹配到数据，如果匹配成功
          arrByZM.push(this.goodsList[i]);
          //向空数组中添加数据
        }
      }
      //一定要记得返回筛选后的数据
      return arrByZM;
    },
  },
  created() {
    //调用windowwidth方法 传入当前页面宽度
    this.windowWidth(document.documentElement.clientWidth);
    gethomesearch().then((res) => {
      // console.log(res.data);
      this.goodsList = res.data;
    });
  },
  mounted() {
    const _this = this;
    //调整窗口事件，当窗口大小变化的时候 调用函数
    window.onresize = () => {
      return (() => {
        _this.clientWidth = `${document.documentElement.clientWidth}`;
      })();
    };
  },
  watch: {
    clientWidth(val) {
      if (!this.timer) {
        this.clientWidth = val;
        this.timer = true;
        let _this = this;
        setTimeout(function () {
          _this.timer = false;
        }, 500);
      }
      // 这里可以添加修改时的方法
      this.windowWidth(val);
    },
    searchval(val) {
      if (val != "") {
        this.issearchinput = true;
      } else {
        this.issearchinput = false;
      }
      // console.log(val);
    },
  },
  methods: {
    changelistactive() {
      this.islistactive = !this.islistactive;
      // console.log(this.islistactive)
    },
    //监听浏览器宽度变化
    windowWidth(value) {
      this.clientWidth = value;
      // console.log(this.clientWidth);
      if (this.clientWidth > 839) {
        this.islistactive = false;
      }
    },
    //发送emit事件 跳转页面高度
    goside(item, index) {
      // console.log(index)
      let str = item.livalue + index;
      // console.log(str);
      this.$emit("goside", str);
    },
  },
};
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 839px) {
  .bottom-right-media {
    display: none;
  }
  .bottom-list {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  .bottom-span {
    margin-left: 10px;
  }
}
.list-search {
  max-width: 230px;
  display: flex;
  height: 40px;
  margin: 5px auto 0;
}
.bottom-right-media {
  width: 40px;
  height: 40px;
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  background: url("http://192.168.2.27:8888/assets/img/choose.png") no-repeat 0
    0;
  background-size: cover;
}
.bottom-list {
  position: absolute;
  transform: scaleY(0);
  transform-origin: center top;
  margin-left: 4%;
  width: 92%;
  height: 280px;
  margin-top: 1%;
  border-radius: 8px;
  transition: 0.3s linear;
  background-color: rgba(0, 0, 0, 0.97);
}
.isanimate {
  display: block;
  transform: scaleY(1);
}
.list-ul {
  list-style: none;
  color: white;
  margin-top: 10px;
}
.list-ul li {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 13px;
  line-height: 40px;
}
.list-ul li:hover span {
  color: #b22222;
}
.list-ul li:first-child {
  border-radius: 8px 8px 0 0;
}
a {
  text-decoration: none;
  color: white;
}

.nav-bottom {
  width: 100%;
  // overflow:initial;
  background: rgba(0, 0, 0, 0.78);
}
.nav-bottom-center {
  max-width: 1100px;
  min-height: 80px;
  // height: 20%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1060px) {
  .nav-bottom-center {
    height: 180px;
  }
}
@media only screen and (min-width: 200px) and (max-width: 838px) {
  .bottom-right {
    display: none;
  }
  .nav-bottom-center {
    height: 80px;
  }
  .searchmessage-div {
    display: none;
  }
}
.bottom-ul {
  display: flex;
  list-style: none;
  color: white;
  float: left;
  height: 80px;
  width: 500px;
  line-height: 50px;
  margin-left: 8rem;
  padding-top: 15px;
  box-sizing: border-box;
}
.bottom-ul li {
  margin-right: 1rem;
  font-size: 14px;
  font-weight: 600;
  font-family: "Sintony", sans-serif;
  position: relative;
  // background-color: green;
}
// .bottom-ul li:hover span{
//   border-bottom: 3px solid #fff;
//   transform: scaleX(1);
// }
.bottom-ul li span {
  display: inline-block;
  height: 50px;
  width: 80px;
  // background-color: red;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 90%;
    height: 3px;
    bottom: 5%;
    left: 5%;
    transform: scaleX(0);
    transform-origin: center;
    transition: 0.5s ease-in-out;
    background-color: white;
    border-radius: 8px;
  }

  // transition: .5s linear;
  // transform-origin: center;
  // transform: scaleX(0);
}
.bottom-ul li:hover span::after {
  transform: scaleX(1);
  // background-color: red;
}

.bottom-span {
  float: left;
  font-size: 40px;
  font-weight: 600;
  font-family: "Sintony", sans-serif;
  line-height: 80px;
  color: white;
}
.bottom-search {
  float: right;
  max-width: 230px;
  display: flex;
  height: 40px;
  margin-top: 20px;
  position: relative;
}
.search-input {
  border: none;
  border-bottom: 2px solid #fff;
  outline: none;
  width: 200px;
  height: 25px;
  margin: auto 0 auto 5px;
  background: rgba(0, 0, 0, 0.1);
  // caret-color: white;
  color: white;
  font-size: 18px;
}
.searchmessage-div {
  width: 20%;
  // height: 80%;
  background-color: rgba(0, 0, 0, 0.98);
  padding-top: 1%;
  padding-bottom: 1%;
  border-radius: 8px;
  position: absolute;
  right: 0%;
  top: 89%;
  // display: none;
  // opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  transition: 0.3s linear;
  // bottom: -100%;
}
.isinput {
  // display: block;
  // opacity: 1;
  transform: scaleY(1);
}
.search-input::placeholder {
  color: white;
  font-size: 14px;
  padding-left: 0.6em;
  font-weight: 600;
  font-family: "Sintony", sans-serif;
}
.search-span {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin: auto 0;
}
.search-span img {
  width: 25px;
  height: 25px;
}
.search-ul {
  list-style: none;
  color: white;
}
.search-ul li {
  width: 100%;
  // background-color: red;
  text-align: center;
  height: 40px;
  line-height: 40px;
  letter-spacing: 2px;
  font-weight: 600;
}
.search-ul li:hover a {
  color: #b22222;
}
.no-data-span {
  color: white;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
</style>